<template>
  <el-card>
    <div slot="header" style="line-height: 40px;">
      <h1>修改密码</h1>
    </div>
    <el-form ref="modifyPasswordForm" :rules="rules" label-width="80px" :model="modifyPasswordForm">
      <el-form-item label="ID" v-show="false">
        <el-input v-model="modifyPasswordForm.id"></el-input>
      </el-form-item>
      <el-form-item label="原密码" prop="password">
        <el-input show-password v-model.trim="modifyPasswordForm.password"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input show-password v-model.trim="modifyPasswordForm.newPassword"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="cfmPassword">
        <el-input show-password v-model.trim="modifyPasswordForm.cfmPassword"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="onReset">重置</el-button>
        <el-button @click="$router.back()">返回</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
  import loginApi from "@/http/loginApi";
  export default {
    name: "Add",
    created() {
    },
    data() {
      let comPass = (rule, value, callback) => {
        if (value != this.modifyPasswordForm.newPassword) {
          callback(new Error());

        } else {
          callback();
        }
      }
      return {
        modifyPasswordForm: {},
        rules: {
          password: [{
            required: true,
            message: '请输入原密码',
            trigger: 'blur'
          }, ],
          newPassword: [{
            required: true,
            message: '请输入新密码',
            trigger: 'blur'
          }],
          cfmPassword: [{
            required: true,
            message: '请输入确认密码',
            trigger: 'blur'
          }, {
            validator: comPass,
            message: '两次输入密码必须一致',
            trigger: 'blur'
          }],
        }
      }
    },
    methods: {
      onSubmit() {
        this.$refs['modifyPasswordForm'].validate((valid) => {
          if (valid) {
            console.log(this.modifyPasswordForm);
            this.modifyPasswordForm.id=this.$store.state.userInfo.id;
             this.modifyPasswordForm.type=this.$store.state.type;
            loginApi.modifyPassword(this.modifyPasswordForm).then((res) => {
              if (res.data.code == 200) {
                sessionStorage.clear();
                this.$router.replace("/login");
              } else {
                this.$message({
                  showClose: true,
                  message: res.data.msg,
                  type: 'error'
                });
              }
            })
          } else {
            console.log('error submit!!');
            return false; //阻止表单提交
          }
        });
      },
      onReset() {
        this.$refs["modifyPasswordForm"].resetFields();
      },
    }
  }
</script>

<style scoped>

</style>